<template>
  <div class="checkboxTable">
    <div class="feature">自定义多选、单选table</div>
    <!-- 顶部标题行前面控制全选和全不选的复选框  -->
    <input type="checkbox" v-model="checkAll" @click="checkedAll()" />
    <div></div>

    <!-- 通过v-for生成的，每一行前面的复选框，item为v-for的每一项  -->
    <div v-for="item in parkList" :key="item.id">
      {{ item.id }}
      <input
        type="checkbox"
        :checked="item.checked"
        @click="changeChecked(item)"
      />
    </div>

    <button @click="prevBtn">上一页</button>
    <button @click="nexBtn">下一页</button>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      checkAll: false,
      parkId: [],
      idArr: [],
      parkList: [
        {
          id: 1,
          checked: false,
        },
        {
          id: 2,
          checked: false,
        },
        {
          id: 3,
          checked: false,
        },
        {
          id: 4,
          checked: false,
        },
      ],
    };
  },
  methods: {
    //上一页，模拟列表的分页效果
    prevBtn() {
      this.parkList = [
        {
          id: 1,
          checked: false,
        },
        {
          id: 2,
          checked: false,
        },
        {
          id: 3,
          checked: false,
        },
        {
          id: 4,
          checked: false,
        },
      ];
      this.checkAll = false;
      this.parkId = [];

      if (this.idArr && this.idArr.length > 0) {
        let newArr = this.parkList;
        for (let obj of this.idArr) {
          const contain = this.parkList.find((item) => {
            if (item.id === obj.id) {
              this.parkId.push(item);
            }
            return item.id === obj.id;
          });
          if (contain) {
            newArr = newArr.map((item) =>
              item.id === obj.id ? obj : item
            );
          }
        }
        this.parkList = newArr;

        let checkboxLen = [];
        checkboxLen = newArr.filter((item) => {
          return item.checked == true;
        });
        console.log("checkboxLen", checkboxLen);
        if (checkboxLen.length == this.parkList.length) {
          this.checkAll = true;
        }
        console.log("this.parkId", this.parkId);
        console.log("newArr", newArr);
      }
    },

    //下一页，模拟列表的分页效果
    nexBtn() {
      this.parkList = [
        {
          id: 5,
          checked: false,
        },
        {
          id: 6,
          checked: false,
        },
        {
          id: 7,
          checked: false,
        },
        {
          id: 8,
          checked: false,
        },
      ];
      this.checkAll = false;
      this.parkId = [];

      if (this.idArr && this.idArr.length > 0) {
        let newArr = this.parkList;
        for (let obj of this.idArr) {
          const contain = this.parkList.find((item) => {
            if (item.id === obj.id) {
              this.parkId.push(item);
            }
            return item.id === obj.id;
          });
          if (contain) {
            newArr = newArr.map((item) =>
              item.id === obj.id ? obj : item
            );
          }
        }
        this.parkList = newArr;

        let checkboxLen = [];
        checkboxLen = newArr.filter((item) => {
          return item.checked == true;
        });
        console.log("checkboxLen", checkboxLen);
        if (checkboxLen.length == this.parkList.length) {
          this.checkAll = true;
        }
        console.log("this.parkId", this.parkId);
        console.log("newArr", newArr);
      }
      console.log("this.idArr", this.idArr);
    },

    //单选
    changeChecked(item1) {
      this.parkList.map((item) => {
        if (item.id === item1.id) {
          item.checked = !item.checked;
        }
      });
      if (item1.checked) {
        this.parkId.push(item1);
        this.idArr.push(item1);
        this.idArr = Array.from(new Set(this.idArr));
      } else {
        this.parkId = this.parkId.filter((item) => {
          return item.id !== item1.id;
        });
        this.idArr = this.idArr.filter((item) => {
          return item.id !== item1.id;
        });
      }
      if (this.parkId.length == this.parkList.length) {
        this.checkAll = true;
      } else {
        this.checkAll = false;
      }
    },

    //全选/全不选
    checkedAll() {
      this.parkId = [];
      if (this.checkAll) {
        this.parkList.map((item) => {
          item.checked = false;
          this.idArr.splice(this.parkId.indexOf(item.id), 1);
        });
      } else {
        this.parkList.map((item) => {
          item.checked = true;
          this.parkId.push(item);
          this.idArr.push(item);
          this.idArr = Array.from(new Set(this.idArr));
        });
      }
    },
  },
  created() {
    // 将列表parkList进行遍历动态添加checked为false
    this.parkList.map((item) => {
      this.$set(item, "checked", false);
    });
  },
};
</script>

<style lang="scss" scoped>
.feature {
  text-align: left;
  margin-bottom: 20px;
  line-height: 22px;
  font-size: 14px;
}
</style>
